
import React, { Component } from 'react'

// 引入动画库
import { CSSTransition, TransitionGroup } from 'react-transition-group'
// 引入动画样式
import './assets/animate.min.css'


class App2 extends Component {

  state = {
    isShow: true,
    user: ['张三']
  }

  handleShoworHide = () => {
    this.setState(state => {
      let name = '李四' + Math.random()
      return {
        user: [...state.user, name]
      }
    })
  }

  render() {
    return (
      <div>
        {/* 列表动画，因为 CSSTransition只能对单个组件有动画效果 */}
        <TransitionGroup>
          {
            this.state.user.map((item, index) => (
              <CSSTransition
                key={index}
                timeout={600}
                classNames={{
                  enter: 'animate__animated',
                  enterActive: 'animate__fadeIn',
                  exit: 'animate__animated',
                  exitActive: 'animate__fadeOut'
                }}
                unmountOnExit
              >
                <h3>{item}</h3>
              </CSSTransition>
            ))
          }
        </TransitionGroup>
        <button onClick={this.handleShoworHide}>隐藏或显示</button>
      </div >
    )
  }
}

export default App2;
